<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Hello World</title>

    <!-- required modeler styles -->
    <link rel="stylesheet" href="https://unpkg.com/bpmn-js@8.7.1/dist/assets/diagram-js.css">
    <link rel="stylesheet" href="https://unpkg.com/bpmn-js@8.7.1/dist/assets/bpmn-font/css/bpmn.css">

    <!-- modeler distro -->
    <script src="https://unpkg.com/bpmn-js@8.7.1/dist/bpmn-modeler.development.js"></script>

    <!-- needed for this example only -->
    <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>

    <!-- example styles -->
    <style>
        html, body, #canvas {
            height: 100%;
            padding: 0;
            margin: 0;
        }

        .diagram-note {
            background-color: rgba(66, 180, 21, 0.7);
            color: White;
            border-radius: 5px;
            font-family: Arial;
            font-size: 12px;
            padding: 5px;
            min-height: 16px;
            width: 50px;
            text-align: center;
        }

        .needs-discussion:not(.djs-connection) .djs-visual > :nth-child(1) {
            stroke: rgba(66, 180, 21, 0.7) !important; /* color elements as red */
        }

        #save-button {
            position: fixed;
            bottom: 20px;
            left: 20px;
        }
    </style>
</head>
<body>
<div id="canvas"></div>

<button id="save-button">print to console</button>

<script>

    var diagramUrl = 'https://cdn.staticaly.com/gh/bpmn-io/bpmn-js-examples/dfceecba/starter/diagram.bpmn';

    // modeler instance
    var bpmnModeler = new BpmnJS({
        container: '#canvas',
        keyboard: {
            bindTo: window
        }
    });

    /**
     * Save diagram contents and print them to the console.
     */
    async function exportDiagram() {

        try {

            var result = await bpmnModeler.saveXML({ format: true });

            alert('Diagram exported. Check the developer tools!');

            console.log('DIAGRAM', result.xml);
        } catch (err) {

            console.error('could not save BPMN 2.0 diagram', err);
        }
    }

    /**
     * Open diagram in our modeler instance.
     *
     * @param {String} bpmnXML diagram to display
     */
    async function openDiagram(bpmnXML) {

        // import diagram
        try {

            await bpmnModeler.importXML(bpmnXML);

            // access modeler components
            var canvas = bpmnModeler.get('canvas');
            var overlays = bpmnModeler.get('overlays');


            // zoom to fit full viewport
            canvas.zoom('fit-viewport');

            // attach an overlay to a node
            overlays.add('SCAN_OK', 'note', {
                position: {
                    bottom: 0,
                    right: 0
                },
                html: '<div class="diagram-note">Mixed up the labels?</div>'
            });

            // add marker
            canvas.addMarker('SCAN_OK', 'needs-discussion');
        } catch (err) {

            console.error('could not import BPMN 2.0 diagram', err);
        }
    }


    // load external diagram file via AJAX and open it
    $.get(diagramUrl, openDiagram, 'text');

    // wire save button
    $('#save-button').click(exportDiagram);
</script>
<!--
  Thanks for trying out our BPMN toolkit!
  This example uses the pre-built distribution of the bpmn-js modeler.
  Consider rolling your own distribution to have more flexibility
  regarding which features to include.
  Checkout our advanced examples section to learn more:
  * https://github.com/bpmn-io/bpmn-js-examples#advanced
  To get a bit broader overview over how bpmn-js works,
  follow our walkthrough:
  * https://bpmn.io/toolkit/bpmn-js/walkthrough/
  Related starters:
  * https://raw.githubusercontent.com/bpmn-io/bpmn-js-examples/starter/viewer.html
-->
</body>
</html>